<template lang="html">
  <div class="detail-swiper">
    <van-swipe :autoplay="3000" class="swiper-cont">
      <van-swipe-item v-for="(item, index) in data" :key="index" @click="openImage(item, data)">
        <img class="slide-image" mode="aspectFill"  :src="item"/>
      </van-swipe-item>
    </van-swipe>
    <van-image-preview v-model="show" :images="data" @change="onChange"></van-image-preview>
   </div>
</template>

<script>

export default {
  props: {
    data: null
  },
  data () {
    return {
      show: false,
      index: 0
    }
  },
  created () {
    console.log(this.$route)
  },
  methods: {
    openImage () {
      this.show = true
      console.log(123)
    },
    onChange () {
      console.log(123)
    }
  }
}
</script>
<style lang="scss" scoped>
.detail-swiper{
  height: 300px;
}
.swiper-cont {
  height: 300px;
}
.detail-swiper .slide-image {
  height: 100%;
  width: 100%;
}
</style>
